<template>
    <div class="flex min-h-screen items-center justify-center bg-gradient-to-b from-blue-50 to-green-50 p-4">
        <div class="w-full max-w-md">
            <div class="mb-8 text-center">
                <h1 class="mb-2 font-serif text-4xl font-bold text-gray-800">{{ title }}</h1>
            </div>

            <!-- 登录卡片 -->
            <div class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg">
                <!-- 卡片顶部装饰 -->
                <div class="h-2 bg-gradient-to-r from-blue-400 to-green-400"></div>

                <div class="p-8">
                    <div class="mb-6 flex justify-center">
                        <div
                            class="flex h-20 w-20 items-center justify-center rounded-full border-4 border-white bg-[var(--primary-color)] shadow-md"
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                class="h-12 w-12 text-gray-700"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
                                />
                            </svg>
                        </div>
                    </div>

                    <h2 class="mb-6 text-center text-2xl font-bold text-gray-800">欢迎回来</h2>

                    <!-- 表单区域 -->
                    <form class="space-y-4" @submit.prevent="handleLoginSubmit">
                        <div>
                            <label for="email" class="mb-1 block text-sm font-medium text-gray-700">账号</label>
                            <input
                                required
                                type="text"
                                id="username"
                                class="w-full rounded-lg border border-gray-300 px-4 py-2 transition duration-200 focus:border-blue-400 focus:ring-2 focus:ring-blue-400"
                                placeholder="请输入账号"
                            />
                        </div>

                        <div>
                            <label for="password" class="mb-1 block text-sm font-medium text-gray-700">密码</label>
                            <input
                                required
                                type="password"
                                id="password"
                                class="w-full rounded-lg border border-gray-300 px-4 py-2 transition duration-200 focus:border-blue-400 focus:ring-2 focus:ring-blue-400"
                                placeholder="••••••••"
                            />
                        </div>

                        <div class="flex hidden items-center justify-between">
                            <div class="flex items-center">
                                <input
                                    id="remember-me"
                                    type="checkbox"
                                    class="h-4 w-4 rounded border-gray-300 text-blue-500 focus:ring-blue-400"
                                />
                                <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住我</label>
                            </div>

                            <a href="#" class="text-sm text-blue-500 hover:text-blue-700">忘记密码?</a>
                        </div>

                        <button
                            type="submit"
                            class="!mt-10 w-full rounded-lg bg-gradient-to-r from-blue-500 to-green-500 px-4 py-2 text-white shadow-md transition duration-200 hover:from-blue-600 hover:to-green-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50"
                        >
                            <router-link to="/">登录</router-link>
                        </button>
                    </form>

                    <!-- <div class="mt-6 text-center">
                        <p class="text-sm text-gray-600">
                            还没有账号?
                            <a href="/register" class="font-medium text-blue-500 hover:text-blue-700">立即注册</a>
                        </p>
                    </div> -->
                </div>
            </div>

            <!-- 底部装饰元素 -->
            <div class="mt-8 flex justify-center space-x-4">
                <div class="animate-float h-8 w-8 rounded-full bg-yellow-300 opacity-30"></div>
                <div class="animate-float h-8 w-8 rounded-full bg-blue-300 opacity-30"></div>
                <div class="animate-float h-8 w-8 rounded-full bg-green-300 opacity-30"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getAllUsersAPI } from "@/api/user";
import { useUserStore } from "@/stores/user";
import feedback from "@/utils/feedback";

const title = "FilmHub 后台管理系统"

const userStore = useUserStore();
const router = useRouter();
const handleLoginSubmit = async (e: Event) => {
    e.preventDefault();
    const { username, password } = e.target as HTMLFormElement;
    if (!username.value || !password.value) {
        feedback.msgError("用户名或密码不能为空！");
        return;
    }

    const users: any[] = await getAllUsersAPI();
    const loginRser = users.find(user => user.username === username.value && user.password === password.value);
    if (!loginRser) {
        feedback.msgError("用户名或密码错误！");
        return;
    }

    localStorage.setItem("userinfo", JSON.stringify(loginRser));

    userStore.userinfo = loginRser;

    feedback.msgSuccess("登录成功！");
    router.push("/index");
    // 返回上一页
    // history.go(-1);
};
</script>

<style>
@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}
</style>
